<template>
	<view class="content">
		<uni-nav-bar fixed left-icon="left" @clickLeft="backHandle" class="unibarS">
			<view class="input-view">
				<u-search placeholder="搜索关键字" v-model="keyword" shape="square" actionText="取消" @custom="customHandle" :actionStyle="{ color: 'rgba(77, 172, 177, 1)' }"></u-search>
			</view>
		</uni-nav-bar>
        <view class="search-type">
            <view class="type-title">按指定类型搜索</view>
            <view class="type-list">
                <view @click="toc()">
					<u--image :src="'/static/img/crm/often_1.png'" width="96rpx" height="96rpx"></u--image>
                    <view class="type-name">客户</view>
                </view>
                <view @click="tos()">
                    <u--image :src="'/static/img/crm/often_2.png'" width="96rpx" height="96rpx"></u--image>
                    <view class="type-name">商机</view>
                </view>
                <view @click="too()">
                    <u--image :src="'/static/img/crm/often_3.png'" width="96rpx" height="96rpx"></u--image>
                    <view class="type-name">订单</view>
                </view>
            </view>
        </view>
        <view class="search-history">
            <view class="title">历史搜索</view>
            <u-icon v-if="list.length" @click="clearHistory" name="trash" color="rgba(255, 0, 28, 1)" size="20"></u-icon>
        </view>
        <!-- 搜索记录 -->
        <view v-if="list.length" class="search-history-list">
            <view class="search-item" v-for="(item, index) in list" :key="index">
                <u-icon name="clock" color="rgba(12, 16, 25, 1)" size="20"></u-icon>
                <view class="search-text">搜索管关键字</view>
                <u-icon name="arrow-right" color="rgba(123, 128, 135, 1)" size="20"></u-icon>
            </view>
        </view>
        <empty-view v-else></empty-view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			keyword: '',
            list: []
		}
	},
	onLoad: function (options) {
    },
	created(options) {
	},

	methods: {
        confirm() {

        },
        clearHistory() {
            uni.showModal({
                title: '提示',
                content: '确定要清空历史记录吗？',
                success: function (res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },
        customHandle() {
            console.log('customHandle')
        },
        toc() {
            uni.navigateTo({
                url: '/pages/other/customeTypeSearch'
            });
        },
        tos() {
            uni.navigateTo({
                url: '/pages/other/boTypeSearch'
            });
        },
        too() {
            uni.navigateTo({
                url: '/pages/other/orderTypeSearch'
            });
        },
        backHandle() {
            uni.navigateBack()
        }
	}
}
</script>

<style lang="scss" scoped>
.content {
    padding: 0 32rpx;
}

.unibarS {
	/deep/.uni-navbar__header {
		padding: 0 32rpx;
	}

	/deep/.uni-navbar__content {
		border-bottom: none !important;
		box-shadow: 0px 0px 4px rgba(136, 136, 136, 0.12);
	}

	/deep/.uni-navbar__header-btns-left {
		width: 20px !important;
	}
	/deep/.uni-navbar__header-btns-right {
		display: none;
	}
}

.input-view {
	width: 100%;
    display: flex;
    align-items: center;
	/deep/.u-tabs__wrapper__nav__item {
		flex: 1;
	}
	/deep/.u-tabs__wrapper__nav__line {
		background: rgba(77, 172, 177, 1) !important;
	}
}

.search-type {
    margin: 40rpx 32rpx;
    .type-title {
        text-align: center;
        font-size: 28rpx;
        font-weight: 500;
        color: rgba(103, 117, 133, 1);
        margin-bottom: 28rpx;
    }
    .type-list {
        display: flex;
        justify-content: space-around;
        > view {
            text-align: center;
            .type-name {
                font-size: 24rpx;
                font-weight: 400;
                color: rgba(0, 0, 0, 1);
                margin-top: 12rpx;
            }
        }
    }
}

.search-history {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
        font-size: 28rpx;
        font-weight: 500;
        color: rgba(12, 16, 25, 1);
    }
}

.search-history-list {
    padding-bottom: 32rpx;
    .search-item {
        display: flex;
        // align-items: center;
        margin-top: 32rpx;
        padding: 30rpx;
        border-radius: 20rpx;
        background: rgba(255, 255, 255, 1);
        .search-text {
            flex: 1;
            font-size: 30rpx;
            font-weight: 500;
            color: rgba(12, 16, 25, 1);
            margin: 0 20rpx;
            // 超出隐藏
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

</style>
